<template>
	<view class="box">
		<view class="top">
			<view class="tab">
				<view class="text">
					<view>上月用电量</view>
					<view>8946.23度</view>

				</view>
				<view class="text">
					<view>昨日用电量</view>
					<view>8946.23度</view>
					
				</view>
	
			</view>
			<view class="tab" style="margin-top: 5px;">
				<view class="text">
					<view>上月用电量</view>
					<view>8946.23度</view>
			
				</view>
				<view class="text">
					<view>昨日用电量</view>
					<view>8946.23度</view>
					
				</view>
			</view>
			
		</view>
		<!-- 图表 -->
		<view class="center">
			 <view class="charts-box">
			    <qiun-data-charts 
			      type="bar"
			      :opts="opts"
			      :chartData="chartData"
			    />
			  </view>
		</view>
		<!-- 表格 -->
		<view class="btn">
		<!-- 	<table border="1">
			   <tr>
			     <th>名称</th>
			     <th>总量</th>
			     <th>同比</th>
			     <th>环比</th>
			   </tr>
			   <tr>
			     <td>1号楼</td>
			     <td>45256.2</td>
			     <td>+1.5%</td>
			     <td>+11.5%</td>
			   </tr>
			   <tr>
			     <td>2号楼</td>
			     <td>45256.2</td>
			     <td>+1.5%</td>
			     <td>+11.5%</td>
			   </tr>
			   <tr>
			     <td>3号楼</td>
			     <td>45256.2</td>
			     <td>+1.5%</td>
			     <td>+11.5%</td>
			   </tr>
			   <tr>
			     <td>4号楼</td>
			     <td>45256.2</td>
			     <td>+1.5%</td>
			     <td>+11.5%</td>
			   </tr>
			   
			</table> -->
			<uni-table border >
				<!-- 表头行 -->
				<uni-tr>
					<uni-th align="left" width="60">名称</uni-th>
					<uni-th align="left" width="60">总量</uni-th>
					<uni-th align="left" width="60">同比</uni-th>
					<uni-th align="left" width="60">环比</uni-th>
				</uni-tr>
				<!-- 表格数据行 -->
				<uni-tr>
					<uni-td>1号楼</uni-td>
					<uni-td>45256.2</uni-td>
					<uni-td>+1.5%</uni-td>
					<uni-td>+11.5%</uni-td>
				</uni-tr>
				<uni-tr>
					<uni-td>1号楼</uni-td>
					<uni-td>45256.2</uni-td>
					<uni-td>+1.5%</uni-td>
					<uni-td>+11.5%</uni-td>
				</uni-tr>
				<uni-tr>
					<uni-td>1号楼</uni-td>
					<uni-td>45256.2</uni-td>
					<uni-td>+1.5%</uni-td>
					<uni-td>+11.5%</uni-td>
				</uni-tr>
				<uni-tr>
					<uni-td>1号楼</uni-td>
					<uni-td>45256.2</uni-td>
					<uni-td>+1.5%</uni-td>
					<uni-td>+11.5%</uni-td>
				</uni-tr>
			
			</uni-table>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				chartData: {},
				      opts: {
				        color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
				        padding: [15,30,0,5],
				        enableScroll: false,
				        legend: {
				        	show: false
				        },
						dataLabel:false,
						
				        xAxis: {
				          boundaryGap: "justify",
				          disableGrid: false,
				          min: 0,
				          axisLine: false,
				          max: 30,
						  splitNumber:4,
						
				        },
				        yAxis: {
							max:30 
						},
				        extra: {
				          bar: {
				            type: "stack",
				            width: 30,
				            meterBorde: 1,
				            meterFillColor: "#FFFFFF",
				            activeBgColor: "#000000",
				            activeBgOpacity: 0.08,
				            categoryGap: 2
				          }
				        }
				      }
			}
		},
		onReady() {
		    this.getServerData();
		  },
		methods: {
			 getServerData() {
			      //模拟从服务器获取数据时的延时
			      setTimeout(() => {
			        //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
			        let res = {
			            categories: ["制造用电","生产用电","特殊用电","动力用电","空调用电","照明与插座用电"],
			            series: [
			              {
			                name: "目标值",
			                data: [12,21,24,25,5,30]
			              },
			             
			            ]
			          };
			        this.chartData = JSON.parse(JSON.stringify(res));
			      }, 500);
			    },
			  }
		}
	
</script>

<style lang="scss">
	uni-table{
		width: 80%;
		height: 80%;
		
	}
	 .charts-box {
	    width: 90%;
	    height: 80%;
		margin-top: 10px;
	  }
	.box{
		width: 100vw;
		height: 100vh;
		background-color: #f4f6f9;
		
	}
	.top{
		width: 100%;
		height: 35%;
		// background-color: lightblue;
		.tab{
			width: 100%;
			height: 50%;
			// background-color: lightseagreen;
			display: flex;
			.text{
				width: 50%;
				height: 90%;
				margin: 5px;
				background-color: #5bb8cc;
				view{
					width: 100%;
					text-align: center;
					color: white;
					font-size: 18px;
					margin-top: 15px;
				}
			} 
			
		}
	}
	.center{
		width: 100%;
		height: 29%;
	}
	.btn{
		width: 100%;
		height: 32%;
		background-color: lightcyan;
	}

</style>
